<template>
  <view class="preview-container">
    <!-- 页头 -->
    <view class="page-header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image
            class="back-icon"
            src="/static/icons/candidate/pre_page.png"
          ></image>
        </view>
        <text class="header-title">{{ fileName }}</text>
        <view class="header-right">
          <!-- 可以放置更多按钮，暂时留空 -->
        </view>
      </view>
    </view>

    <!-- 预览内容区域 -->
    <view class="preview-content">
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>

      <!-- 错误状态 -->
      <view v-else-if="error" class="error-container">
        <image class="error-icon" src="/static/icons/msg/msg-failed.png"></image>
        <text class="error-text">{{ error }}</text>
        <button class="retry-btn" @click="retryPreview">重试</button>
      </view>

      <!-- 预览内容 -->
      <view v-else class="preview-wrapper">
        <!-- PDF预览 -->
        <view v-if="fileType === 'pdf'" class="pdf-preview">
          <!-- 使用ss-preview组件进行PDF预览 -->
          <ss-preview 
            v-if="useSSPreview"
            :fileUrl="fileUrl" 
            fileType="2"
            class="ss-preview"
          ></ss-preview>
          
          <!-- 备用web-view预览 -->
          <web-view 
            v-else
            :src="processedFileUrl" 
            class="web-view"
            :webview-styles="webviewStyles"
            ref="webview"
            @message="onWebViewMessage"
            @error="onWebViewError"
          ></web-view>
          
          <!-- 操作按钮组 -->
          <view class="preview-actions">
            <button class="action-btn download-btn" @click="downloadFile">
              <image class="btn-icon" src="/static/icons/candidate/file.png"></image>
              <text class="btn-text">下载</text>
            </button>
            <button class="action-btn switch-btn" @click="togglePreviewMode">
              {{ useSSPreview ? '在线预览' : '本地预览' }}
            </button>
          </view>
        </view>

        <!-- Word文档预览 -->
        <view v-else-if="fileType === 'doc' || fileType === 'docx'" class="word-preview">
          <view class="preview-tips">
            <image class="tips-icon" src="/static/icons/candidate/resume_attach.png"></image>
            <text class="tips-title">Word文档预览</text>
            <text class="tips-content">Word文档无法直接预览</text>
          </view>
          
          <view class="copy-link-container">
            <button class="copy-link-btn" @click="downloadFile">
              <image class="btn-icon" src="/static/icons/candidate/file.png"></image>
              <text class="btn-text">下载文件</text>
            </button>
            <button class="copy-link-btn" @click="copyLink">
              <image class="btn-icon" src="/static/icons/candidate/file.png"></image>
              <text class="btn-text">复制链接</text>
            </button>
          </view>
        </view>

        <!-- 不支持的文件类型 -->
        <view v-else class="unsupported-preview">
          <image class="unsupported-icon" src="/static/icons/msg/msg-warning.png"></image>
          <text class="unsupported-text">不支持预览此文件类型</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ssPreview from "@/uni_modules/ss-preview/components/ss-preview/ss-preview.vue";

export default {
  components: {
    ssPreview,
  },
  data() {
    return {
      fileUrl: "",
      fileName: "",
      fileType: "",
      processedFileUrl: "",
      useSSPreview: true, // 默认使用ss-preview组件
      loading: true,
      error: "",
      webviewStyles: {
        progress: {
          color: '#00bdb4'
        }
      }
    };
  },
  onLoad(options) {
    console.log('文件预览页面参数:', options);
    
    this.fileUrl = decodeURIComponent(options.fileUrl || "");
    this.fileName = decodeURIComponent(options.fileName || "未知文件");
    this.fileType = (options.fileType || "").toLowerCase();
    
    console.log('解析后的参数:', {
      fileUrl: this.fileUrl,
      fileName: this.fileName,
      fileType: this.fileType,
      originalFileUrl: options.fileUrl,
      originalFileName: options.fileName,
      originalFileType: options.fileType
    });
    
    // 开始预览
    this.startPreview();
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack();
    },
    
    
    // 开始预览
    startPreview() {
      if (!this.fileUrl) {
        this.error = "文件链接无效";
        this.loading = false;
        return;
      }
      
      // 基本验证文件URL（不阻止预览）
      this.validateFileUrl();
      
      // 处理文件URL，确保是预览链接而不是下载链接
      this.processFileUrl();
      
      // 模拟加载过程
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },

    // 验证文件URL
    validateFileUrl() {
      console.log('验证文件URL:', this.fileUrl);
      
      // 检查URL是否为空
      if (!this.fileUrl || this.fileUrl.trim() === '') {
        console.error('文件URL为空');
        this.error = "文件链接为空";
        this.loading = false;
        return;
      }
      
      // 基本格式检查 - 只记录警告，不阻止预览
      const trimmedUrl = this.fileUrl.trim();
      
      // 检查是否包含基本的文件路径特征
      if (trimmedUrl.length < 3) {
        console.warn('URL太短，可能无效:', trimmedUrl);
        // 不阻止预览，只是警告
      }
      
      // 对于绝对URL，进行格式验证
      if (trimmedUrl.startsWith('http://') || trimmedUrl.startsWith('https://')) {
        try {
          new URL(trimmedUrl);
          console.log('绝对URL格式验证通过');
        } catch (error) {
          console.warn('绝对URL格式可能有问题:', error);
          console.log('原始URL:', trimmedUrl);
          // 不阻止预览，只是警告
        }
      } else {
        // 相对路径或本地路径，只做基本检查
        console.log('检测到相对路径或本地路径URL:', trimmedUrl);
      }
      
      // 检查文件扩展名（仅对绝对URL）
      if (trimmedUrl.startsWith('http://') || trimmedUrl.startsWith('https://')) {
        try {
          const urlPath = new URL(trimmedUrl).pathname;
          const fileExt = urlPath.split('.').pop()?.toLowerCase();
          
          if (fileExt && fileExt !== this.fileType) {
            console.warn('文件类型不匹配:', { expected: this.fileType, actual: fileExt });
            // 不阻止预览，只是警告
          }
        } catch (error) {
          console.warn('无法解析URL路径:', error);
        }
      }
      
      console.log('文件URL验证完成，继续预览');
    },
    
    // 处理文件URL
    processFileUrl() {
      const originalUrl = this.fileUrl;
      
      // 如果是PDF文件，使用在线预览服务
      if (this.fileType === 'pdf') {
        // 优先使用Google Docs Viewer进行PDF预览
        this.processedFileUrl = `https://docs.google.com/gview?url=${encodeURIComponent(originalUrl)}&embedded=true`;
      }
      // 如果是Word文档，也可以尝试使用在线预览
      else if (this.fileType === 'doc' || this.fileType === 'docx') {
        // 使用Microsoft Office Online Viewer
        this.processedFileUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(originalUrl)}`;
      }
      // 其他文件类型直接使用原URL
      else {
        this.processedFileUrl = originalUrl;
      }
      
      console.log('处理后的文件URL:', this.processedFileUrl);
    },
    
    // web-view 消息处理
    onWebViewMessage(event) {
      console.log('web-view 消息:', event);
    },
    
    // web-view 错误处理
    onWebViewError(event) {
      console.error('web-view 错误:', event);
      this.error = "预览加载失败，请重试";
      this.loading = false;
    },
    
    // 切换预览模式
    togglePreviewMode() {
      this.useSSPreview = !this.useSSPreview;
      console.log('切换预览模式:', this.useSSPreview ? 'ss-preview' : 'web-view');
    },
    
    // 重试预览
    retryPreview() {
      this.loading = true;
      this.error = "";
      this.startPreview();
    },
    
    // 下载文件
    downloadFile() {
      console.log('用户点击下载按钮');
      console.log('当前文件信息:', {
        fileUrl: this.fileUrl,
        fileName: this.fileName,
        fileType: this.fileType
      });
      
      if (!this.fileUrl) {
        console.error('文件URL为空');
        uni.showToast({
          title: "文件链接无效",
          icon: "none",
          duration: 2000
        });
        return;
      }

      // 检查网络状态
      uni.getNetworkType({
        success: (res) => {
          console.log('网络状态:', res);
          if (res.networkType === 'none') {
            uni.showToast({
              title: "网络连接不可用",
              icon: "none",
              duration: 2000
            });
            return;
          }
          
          // 显示操作选择
          uni.showActionSheet({
            itemList: ['下载并保存', '用系统应用打开', '复制下载链接'],
            success: (res) => {
              console.log('用户选择操作:', res.tapIndex);
              switch (res.tapIndex) {
                case 0:
                  this.downloadAndSave();
                  break;
                case 1:
                  this.openWithSystemApp();
                  break;
                case 2:
                  this.copyLink();
                  break;
              }
            },
            fail: (error) => {
              console.error('操作选择失败:', error);
            }
          });
        },
        fail: (error) => {
          console.error('获取网络状态失败:', error);
          // 即使获取网络状态失败，也继续执行下载
          uni.showActionSheet({
            itemList: ['下载并保存', '用系统应用打开', '复制下载链接'],
            success: (res) => {
              switch (res.tapIndex) {
                case 0:
                  this.downloadAndSave();
                  break;
                case 1:
                  this.openWithSystemApp();
                  break;
                case 2:
                  this.copyLink();
                  break;
              }
            }
          });
        }
      });
    },

    // 下载并保存文件
    downloadAndSave() {
      console.log('开始下载文件...');
      console.log('下载URL:', this.fileUrl);
      console.log('文件名:', this.fileName);
      console.log('文件类型:', this.fileType);
      
      // 显示下载提示
      uni.showLoading({
        title: "正在下载...",
        mask: true
      });

      // 使用uni.downloadFile下载文件
      uni.downloadFile({
        url: this.fileUrl,
        success: (res) => {
          uni.hideLoading();
          console.log('下载响应:', res);
          console.log('状态码:', res.statusCode);
          console.log('临时文件路径:', res.tempFilePath);
          
          if (res.statusCode === 200) {
            console.log('下载成功，开始保存文件...');
            // 下载成功，保存到相册或文件管理器
            this.saveFile(res.tempFilePath);
          } else {
            console.error('下载失败，状态码:', res.statusCode);
            console.error('响应数据:', res);
            uni.showToast({
              title: `下载失败 (${res.statusCode})`,
              icon: "none",
              duration: 3000
            });
          }
        },
        fail: (error) => {
          uni.hideLoading();
          console.error('下载请求失败:', error);
          console.error('错误详情:', {
            errMsg: error.errMsg,
            errCode: error.errCode,
            url: this.fileUrl
          });
          uni.showToast({
            title: `下载失败: ${error.errMsg || '未知错误'}`,
            icon: "none",
            duration: 3000
          });
        }
      });
    },

    // 用系统应用打开文件
    openWithSystemApp() {
      console.log('准备用系统应用打开文件...');
      console.log('文件URL:', this.fileUrl);
      
      // 显示下载提示
      uni.showLoading({
        title: "正在准备...",
        mask: true
      });

      // 先下载文件到临时目录
      uni.downloadFile({
        url: this.fileUrl,
        success: (res) => {
          uni.hideLoading();
          console.log('下载响应:', res);
          console.log('状态码:', res.statusCode);
          console.log('临时文件路径:', res.tempFilePath);
          
          if (res.statusCode === 200) {
            console.log('开始用系统应用打开文件...');
            // 使用uni.openDocument打开文件
            uni.openDocument({
              filePath: res.tempFilePath,
              showMenu: true,
              success: () => {
                console.log('文件打开成功');
                uni.showToast({
                  title: "文件已打开",
                  icon: "success",
                  duration: 2000
                });
              },
              fail: (error) => {
                console.error('文件打开失败:', error);
                console.error('打开失败详情:', {
                  errMsg: error.errMsg,
                  errCode: error.errCode,
                  filePath: res.tempFilePath,
                  fileType: this.fileType
                });
                uni.showToast({
                  title: `无法打开此文件类型: ${error.errMsg || '未知错误'}`,
                  icon: "none",
                  duration: 3000
                });
              }
            });
          } else {
            console.error('下载失败，状态码:', res.statusCode);
            uni.showToast({
              title: `文件获取失败 (${res.statusCode})`,
              icon: "none",
              duration: 3000
            });
          }
        },
        fail: (error) => {
          uni.hideLoading();
          console.error('下载失败:', error);
          console.error('下载失败详情:', {
            errMsg: error.errMsg,
            errCode: error.errCode,
            url: this.fileUrl
          });
          uni.showToast({
            title: `文件获取失败: ${error.errMsg || '未知错误'}`,
            icon: "none",
            duration: 3000
          });
        }
      });
    },

    // 保存文件
    saveFile(tempFilePath) {
      console.log('开始保存文件...');
      console.log('临时文件路径:', tempFilePath);
      console.log('文件类型:', this.fileType);
      
      // 根据文件类型选择保存方式
      if (this.fileType === 'pdf') {
        console.log('PDF文件，保存到文件管理器');
        // PDF文件保存到文件管理器
        this.saveToFileManager(tempFilePath);
      } else if (['jpg', 'jpeg', 'png', 'gif'].includes(this.fileType)) {
        console.log('图片文件，保存到相册');
        // 图片保存到相册
        this.saveToAlbum(tempFilePath);
      } else {
        console.log('其他文件类型，保存到文件管理器');
        // 其他文件保存到文件管理器
        this.saveToFileManager(tempFilePath);
      }
    },

    // 保存到相册
    saveToAlbum(tempFilePath) {
      console.log('保存图片到相册...');
      console.log('文件路径:', tempFilePath);
      
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success: () => {
          console.log('保存到相册成功');
          uni.showToast({
            title: "已保存到相册",
            icon: "success",
            duration: 2000
          });
        },
        fail: (error) => {
          console.error('保存到相册失败:', error);
          console.error('保存失败详情:', {
            errMsg: error.errMsg,
            errCode: error.errCode,
            filePath: tempFilePath
          });
          // 如果保存到相册失败，尝试保存到文件管理器
          console.log('尝试保存到文件管理器...');
          this.saveToFileManager(tempFilePath);
        }
      });
    },

    // 保存到文件管理器
    saveToFileManager(tempFilePath) {
      console.log('保存文件到文件管理器...');
      console.log('临时文件路径:', tempFilePath);
      
      // 获取文件扩展名
      const ext = this.getFileExtension();
      const fileName = `${this.fileName}${ext}`;
      console.log('目标文件名:', fileName);
      console.log('文件扩展名:', ext);
      
      // 使用uni.saveFile保存文件
      uni.saveFile({
        tempFilePath: tempFilePath,
        success: (res) => {
          console.log('文件保存成功');
          console.log('保存路径:', res.savedFilePath);
          uni.showToast({
            title: "文件已保存",
            icon: "success",
            duration: 2000
          });
        },
        fail: (error) => {
          console.error('保存文件失败:', error);
          console.error('保存失败详情:', {
            errMsg: error.errMsg,
            errCode: error.errCode,
            tempFilePath: tempFilePath,
            fileName: fileName
          });
          uni.showToast({
            title: `保存失败: ${error.errMsg || '未知错误'}`,
            icon: "none",
            duration: 3000
          });
        }
      });
    },

    // 获取文件扩展名
    getFileExtension() {
      const extMap = {
        'pdf': '.pdf',
        'doc': '.doc',
        'docx': '.docx',
        'jpg': '.jpg',
        'jpeg': '.jpeg',
        'png': '.png',
        'gif': '.gif',
        'txt': '.txt'
      };
      return extMap[this.fileType] || '';
    },

    // 复制链接
    copyLink() {
      uni.setClipboardData({
        data: this.fileUrl,
        success: () => {
          uni.showToast({
            title: "链接已复制到剪贴板",
            icon: "success",
            duration: 2000
          });
        },
        fail: () => {
          uni.showToast({
            title: "复制失败",
            icon: "none",
            duration: 2000
          });
        }
      });
    }
    
  }
};
</script>

<style lang="scss" scoped>
.preview-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  /* 确保不被状态栏遮挡 */
  padding-top: env(safe-area-inset-top);
}

/* 页头样式 */
.page-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
  /* 确保在状态栏下方 */
  margin-top: 0;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  max-width: 400rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.header-right {
  width: 60rpx;
}

/* 预览内容区域 */
.preview-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  padding-top: 0;
  /* 计算可用高度，减去导航栏和页头的高度 */
  height: calc(100vh - env(safe-area-inset-top) - 88rpx);
  min-height: 0;
}

/* 加载状态 */
.loading-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-text {
  font-size: 32rpx;
  color: #999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 错误状态 */
.error-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60rpx;
}

.error-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.error-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 40rpx;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.retry-btn {
  background-color: #00bdb4;
  color: #ffffff;
  border: none;
  border-radius: 40rpx;
  padding: 20rpx 40rpx;
  font-size: 32rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* 预览内容 */
.preview-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* PDF预览 */
.pdf-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0; /* 确保flex子元素可以收缩 */
}

.ss-preview {
  flex: 1;
  width: 100%;
  height: 100%;
}

.preview-actions {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
  /* 确保不被状态栏遮挡 */
  margin-top: env(safe-area-inset-top);
}

.action-btn {
  background-color: rgba(0, 189, 180, 0.8);
  color: #ffffff;
  border: none;
  border-radius: 20rpx;
  padding: 10rpx 20rpx;
  font-size: 24rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  align-items: center;
  gap: 8rpx;
  min-width: 120rpx;
  justify-content: center;
}

.download-btn {
  background-color: rgba(52, 152, 219, 0.8);
}

.switch-btn {
  background-color: rgba(0, 189, 180, 0.8);
}

.web-view {
  flex: 1;
  width: 100%;
  height: 100%;
  /* #ifdef H5 */
  position: relative;
  /* #endif */
  /* #ifdef APP-PLUS */
  position: absolute;
  top: 0;
  left: 0;
  /* #endif */
}

/* Word文档预览 */
.word-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60rpx;
}

.preview-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 60rpx;
}

.tips-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
  opacity: 0.6;
}

.tips-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 20rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.tips-content {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.copy-link-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 40rpx;
}

.copy-link-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #00bdb4;
  border: none;
  border-radius: 16rpx;
  padding: 30rpx 60rpx;
  gap: 20rpx;
  transition: all 0.2s ease;
}

.copy-link-btn:active {
  background-color: #00a89c;
}

.btn-icon {
  width: 40rpx;
  height: 40rpx;
}

.btn-text {
  font-size: 32rpx;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


/* 不支持的文件类型 */
.unsupported-preview {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 60rpx;
}

.unsupported-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.unsupported-text {
  font-size: 32rpx;
  color: #666;
  margin-bottom: 40rpx;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}


</style>
